<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="注册 / 登录"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 登录表单 -->
    <!-- 基于Vant的的表单验证：
         1.使用van-form组件包裹所有的表单项van-field
         2.给van-form绑定submit时间
         当表单验证的时候会触发submit事件
         提示：只有表单验证通过，它才会调用submit
         3.使用field的rules属性定义检验规则 -->
    <van-form 
      :show-error="false" 
      :show-error-message="false"
      validate-first
      ref="login-form"
      @submit="onLogin" 
      @failed="onFailed">
      <van-field
        v-model="user.mobile"
        icon-prefix="toutiao"
        left-icon="shouji"
        center
        placeholder="请输入手机号"
        name="mobile"
        :rules="formRules.mobile"
      />
      <van-field
        v-model="user.code"
        clearable
        icon-prefix="toutiao"
        left-icon="yanzhengma"
        center
        placeholder="请输入验证码"
        name="code"
        :rules="formRules.code"
      >
        <template #button>
          <van-count-down v-if="isCountDownShow" 
            :time="1000*60" format="ss s "
            @finish="isCountDownShow=false"/>
          <van-button
            v-else
            class="send-btn"
            size="mini"
            round
            :loading="isSendSmsLoading"
            @click.prevent="onSendSms"
          >发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" block>登录</van-button>
      </div>
    </van-form>
    <!-- /登录表单 -->
  </div>
</template>

<script>
import { login,sendSms } from '@/api/user'

export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '13611111111', // 手机号
        code: '246810' // 验证码
      },
      formRules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message:'手机号格式错误'}
        ],
        code: [
           { required: true, message: '请填写验证码' },
           { pattern: /^\d{6}$/, message:'验证码格式错误'}
        ]
      },
      isCountDownShow:false, //控制倒计时和发送按钮的显示状态
      isSendSmsLoading:false,//发送验证码按钮的加载状态
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async onLogin () {
      // loading 转圈圈提示
      this.$toast.loading({
        duration: 0, // 持续展示 toast 展示时长(ms)，值为 0 时，toast 不会消失
        message: "加载中...",
        forbidClick: true // 禁止背景点击
      })
      // 1．找到数据接口
      // 2．封装请求方法
      // 3．请求调用登录
      try {
        // const res = await login(this.user)
        const {data} = await login(this.user)
        //console.log(data);
        //4. 处理相应结果
        this.$toast.success('登陆成功')

        //将后端返回的用户登录状态（token等数据）放到Vuex容器中
        this.$store.commit('setUser',data.data)

        //登录成功，跳转回原来页面
        this.$router.back()//不太好
      } catch (err) {
        console.log(err)
         this.$toast.fail('登录失败，手机号或验证码错误')
      }
    },
    onFailed (error) {
      console.log(error);
      if (error.errors[0]) {
        this.$toast({
          message:error.errors[0].message,//提示信息
          position:'top' //防止键盘太高看不见提示
        })
      }
    },
    async onSendSms () {
      try {
        //1. 校验手机号码
        //在await后调用.catch方法处理promise异常
        await this.$refs['login-form'].validate('mobile')
        //对于async await流程，认为123-131是正确的，因为她自己在内部把自己的异常处理了，
        //所以即便是表单验证失败，代码也会往后走
        // .catch(
        //   err=>{
        //     this.$toast({
        //     message:err.message,
        //     position:'top' 
        //   })
        // })
        //验证通过，请求发送验证码
        this.isSendSmsLoading=true //展示按钮的加载状态，防止用户多次点击
        await sendSms(this.user.mobile)
        // const res=await sendSms(this.user.mobile)
        // console.log(res);

        //短信发出去了，隐藏发送按钮,显示倒计时
        this.isCountDownShow=true
      } catch (err) {
        //try里面任何代码错误都会进入catch
        //不同的错误需要有不同的提示，那就需要判断了
        let message=''
        if (err&&err.response&&err.response.status===429) {
          //发送短信失败的错误提示
          message='发送太频繁了，请稍后重试'
        }else if(err.name==='mobile'){
          //表单验证失败的错误提示
          message=err.message
        }else{
          //位置错误
          message='发送失败，请稍后重试'
        }
        
        this.$toast({
          message,
          position:'top' 
        })
      }

      //无论发送验证码成功还是失败，最后都要关闭发送按钮的loading状态
      this.isSendSmsLoading=false

      // //返回promise要用.then来拿结果,data是验证失败错误提交消息
      // this.$refs['login-form'].validate('mobile').then(
      //   data=>{
      //     console.log(data);
      // })
      //2. 验证通过->请求发送验证码->用户接收短信->
      //输入验证码->请求登录
      //3. 请求发送验证码 -> 隐藏发送按钮,显示倒计时
      //倒计时结束->隐藏倒计时，显示发送按钮
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .send-btn {
    width: 76px;
    height: 23px;
    background-color: #ededed;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap {
    padding: 26px 16px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
      .van-button__text {
        font-size: 15px;
      }
    }
  }
}
</style>